<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>早餐管理系统后台</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        *{
            font-family: 仿宋;
            color: rgb(16, 91, 6);
        }
        body {
            background-image: url('img/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        a{
            text-decoration: none;
        }
        html body{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        .containerBtn{
            width: 200px;
            background-color: cornsilk;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .containerBtn1{
            width: 200px;
            background-color: #d1e8be;
            padding: 15px;
            border: none;
            cursor: pointer;
        }
        .container{
            position: relative;
            display: inline-block;
            /*width: 230px;*/
        }
        .hidden-container{
            left: 100px;
            display: none;
            position: absolute;
            background-color: antiquewhite;
            width: 230px;
            box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
            z-index: 1;
        }
        .hidden-container a{
            margin-left: 20px;
        }
        .hidden-container a:hover{
            color: #34640d;
            font-size: 22px;

        }
        .container:hover .hidden-container{
            display: block;
        }
        .container:hover .containerBtn{
            background-color: #96d08e;
        }
    </style>
</head>

<body id="app">
<div style="width: 100%;height: 600px;">
    <!--头部-->
    <div style="height: 50px;width: 100%;background-color: azure;padding-top: 20px">
        <span style="margin-left: 40%;margin-top: 15%;font-size: 24px;font-family: 仿宋" >早餐管理系统后台</span>
        <div style="margin-top: -30px">
            <span v-on:click="this.adminUnlogin()" style="margin-left: 90%;font-size: 20px">退出</span>
        </div>
    </div>
    <div style="width: 230px;background-color: cornsilk;height: calc(100% - 30px);float: left">
        <div class="containerBtn1"><span style="margin-left: 30%">客户管理</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">类型管理</span></div>
        <div class="containerBtn1"><span style="margin-left: 30%"><a href="/admin/foods.html">食品管理</a></span></div>
        <div class="container">
            <button class="containerBtn" style="width: 230px">数据分析</button>
            <div class="hidden-container"><br>
                <a href="/admin/foods-num.html">食品实时库存柱状图</a><br><br>
                <a href="/admin/foods-sale-price.html">食品销售额饼图</a><br><br>
                <a href="/admin/orders-num-group-by-hour.html">小时订单实时折线图</a><br><br>
                <a href="/admin/orders-foods.html">不同类型销售比例图</a><br><br>
                <a href="/admin/orders-typesId-hour.html">小时不同类型打包图</a><br><br>
                <a href="/admin/summation-data.html">数据汇总大屏</a><br><br>
            </div>
        </div>
        <div class="containerBtn1"><span style="margin-left: 30%">系统日志</span></div>
        <div class="containerBtn"><span style="margin-left: 30%">推荐参数</span></div><br>
    </div>
    <!--右边显示区域-->
    <div style="width: calc(100% - 230px);height: calc(100% - 30px);float: left;">
       <div style="margin-left: 7%;margin-top: 20px">
           <div style="margin-left: 10%;margin-bottom: 10px">
               <div style="font-size:20px;filter: saturate(200%);float: left;margin-top: 10px">食品：</div>
               <input type="text" name="" id="" style="width: 400px;height: 35px">
               <button style="width: 50px;height: 35px;margin-left: 10px">搜索</button></div>
           <table style="width: 800px;border: 1px solid black;">
               <tr>
                   <td>编号</td>
                   <td>名字</td>
                   <td>图片</td>
                   <td>价格</td>
                   <td>库存</td>
                   <td>上架时间</td>
                   <td>详情</td>
                   <td>操作</td>
               </tr>
               <tr v-for="foods in foodsList">
                   <td v-text="foods.id"></td>
                   <td v-text="foods.name"></td>
                   <td>
                       <img v-bind:src="foods.pic" width="40" height="60">
                   </td>
                   <td>
                       <span v-text="'￥'+foods.price" style="color: red"></span>
                   </td>
                   <td v-text="foods.num"></td>
                   <td v-text="foods.createTime"></td>
                   <td v-text="foods.detail"></td>
                   <td>
                       <span><button>修改</button><button>删除</button></span>
                   </td>
               </tr>
           </table>
       </div>
    </div>

    <div style="clear: both"></div>
</div>
</body>
<script>
    //定义app
    const app = {

        //数据绑定
        data() {
            return {
                //食品列表
                foodsList: [],

            }
        },
        //事件绑定
        methods: {
            //退出登录
            adminUnlogin:function (typesId) {
                axios({
                    method: "post", url: "/adminUnlogin", data: {}
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("退出成功！")
                        window.location.href="/index.html"
                    }else {
                        alert(response.data)
                    }
                });
            },
            //获取所有食品
            getAllFoods: function () {
                axios({
                    method: "post", url: "/getAllFoods", data: {}
                }).then((response) => {
                    this.foodsList=response.data
                });
            },


        },


        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getAllFoods();
        }
    }

    //启动app
    Vue.createApp(app).mount("#app")
</script>
</html>